<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文章访问统计</title>
</head>
<style type="text/css">
<!--
*{margin:0;padding:0;}
body,html{height:100%;}
#box{width:100%;height:100%;padding-left:5px;}
#box_left{width:10%;height:100%;float:left;}
.li_div{position:relative;z-index:2000px;width:100%;height:30px;vertical-align: middle;line-height:30px;text-align:center;border:1px solid #ccc;background-color:#D5D5D5;cursor:pointer;margin-top:7px;font-size:12px;}
.li_div:hover{background-color:#F7F7F7;}
.liClick{position:relative;z-index:2000px;width:100%;height:30px;vertical-align: middle;line-height:30px;text-align:center;border:1px solid #ccc;background-color:#ffffff;margin-top:7px;font-size:12px;border-right-width: 0;}

.box_right{
	float:left;
	width:89%;
	height:100%;
	border:0;
	border-left:1px solid #ccc;
	background-color:#ffffff;
	padding-left:8px;
	z-index:20px;
	margin-left:-1px;
}

.seStyle{border:1px solid #425f99;width:200px;height:25px;vertical-align:middle;line-height:25px;text-align:center;cursor: pointer;color:#09387F;font-family: '宋体';}
.tr{background-color:#add2da;text-align:center;}
.tr2:hover{background-color:#FDF5E6;}
.imgBtn{color:#05080C;
		background-image: url("${rc.contextPath}/images/botton_125.png");
		width:235px;
		height:59px;
		border:0px;
		cursor:pointer;}
.imgBtn:hover{color:#05080C;
		background-image: url("${rc.contextPath}/images/botton_126.png");
		width:235px;
		height:59px;
		border:0px;
		cursor:pointer;}	
.select_term{width:99%;height:35px;vertical-align: middle;line-height:30px;display:table-cell;}
#fixed_div{width:100px;height:200px;position:fixed;right:0;top:20px; }
#fixed_div img{cursor:pointer;}
-->
</style>
<body>
<div style="height:97%;width:99%;">
	<div id="box">
		<div id="box_left">
			<div id="article" class="li_div">文章统计</div>
			<div id="user" class="li_div">用户统计</div>
		</div>
		<div id="article_statistics" class="box_right">
		<div class="select_term">
			<select id="accessTimeCount" onchange="changeLimit(this,1)" style="border:1px solid #ccc;background:#ffffff;width:200px;font-size:15px;">
				<option value="">请选择...</option> 
				<option value="10">前10条</option>
				<option value="20">前20条</option>
				<option value="30">前30条</option>
				<option value="50">前50条</option>
				<option value="70">前70条</option>
				<option value="100">前100条</option>
			</select>
		</div>
		<img id="accessStatistics_img"  src="<c:url value="gennerationStatisticsChart?type=1&chartType=bar" />" onerror="this.src = '${rc.contextPath }/images/preload.gif'"/>
		<div class="select_term">
			<select onchange="gennerArticleStatistics(this)" id="accessTime" style="border:1px solid #ccc;background:#ffffff;width:200px;font-size:15px;">
				<option value="">请选择...</option> 
			</select>
			<select id="articleCount" onchange="changeLimit(this,2)" style="border:1px solid #ccc;background:#ffffff;width:200px;font-size:15px;">
				<option value="">请选择...</option> 
				<option value="10">前10条</option>
				<option value="20">前20条</option>
				<option value="30">前30条</option>
				<option value="50">前50条</option>
				<option value="70">前70条</option>
				<option value="100">前100条</option>
			</select>
		</div>
		<img id="articleStatistics_img"  src="<c:url value="gennerationStatisticsChartForArticle?chartType=bar" />" onerror="this.src = '${rc.contextPath }/images/preload.gif'"/>
		</div>
		<div id="user_statistics" style="display:none;" class="box_right"></div>
		<div style="clear:both;"></div>
	</div>
</div>	
<div id="fixed_div">
	<img title="柱状图" src="${rc.contextPath }/images/bar.png" onclick="changeChart('bar')" /><Br/><Br/>
	<img title="饼状图" src="${rc.contextPath }/images/Colourful_Chart_002.png" onclick="changeChart('pie')"/>
</div>
<br>

</body>
<script type="text/javascript" src="${rc.contextPath }/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript">
var stype = 1;//
var formid;//
var chartType = 'bar';//

$(document).ready(function(){
	 $(".li_div").bind("click",function(){
		 $("#box_left").find('div').removeClass();
		 $("#box_left").find('div').addClass('li_div');
		 $(this).removeClass();
		 $(this).addClass('liClick');
		 $("#box").find(".box_right").css("display","none");
		 $("#"+$(this).attr("id")+"_statistics").css("display","block");
		 if($(this).attr("id") == "article"){
			 stype = 2;
		 }else{
			 stype = 1;
		 }
	 });
	 $(".li_div:first").addClass('liClick');
	 
	 getAccessTime();
});	
function changeChart(type){
	chartType = type;
	var limit =  $("#accessTimeCount").val();
	$("#accessStatistics_img").attr('src','<c:url value="gennerationStatisticsChart?type=1&chartType='+ type +'&limit='+limit+'" />');
	var limits = $("#articleCount").val();
	var time = $("#accessTime").val();
	$("#articleStatistics_img").attr('src','<c:url value="gennerationStatisticsChartForArticle?chartType='+type+'&limit='+limits+'&accessTime='+time+'" />');
}
function getAccessTime(){
	$.ajax({
		url:'gennerationStatisticsChart?type=2&chartType='+chartType,
		type:'post',
		dataType:'json',
		success:function(data){
			var html = '<option value="">请选择....</option>';
			$.each(data,function(i,u){
				html += '<option value="'+ u.accessTime +'">'+ u.accessTime +'</option>';
			});
			$("#accessTime").html(html);
		},
		error:function(msg){
		}
	});
}
function changeLimit(obj,type){
	var limit = obj.value;
	if(type == 1){
		$("#accessStatistics_img").attr('src','<c:url value="gennerationStatisticsChart?chartType='+chartType+'&type=1&limit='+limit+'" />');
		$.ajax({
			url:'gennerationStatisticsChart?chartType='+chartType+'&type=2&limit='+limit,
			type:'post',
			dataType:'json',
			success:function(data){
				var html = '<option value="">请选择....</option>';
				$.each(data,function(i,u){
					html += '<option value="'+ u.accessTime +'">'+ u.accessTime +'</option>';
				});
				$("#accessTime").html(html);
			},
			error:function(msg){}
		});
	}else{
		var time = $("#accessTime").val();
		$("#articleStatistics_img").attr('src','<c:url value="gennerationStatisticsChartForArticle?chartType='+chartType+'&accessTime='+time+'&limit='+limit+'" />');
	}
}
function gennerArticleStatistics(obj){
	var time = obj.value;
	var limit = $("#articleCount").val();
	$("#articleStatistics_img").attr('src','<c:url value="gennerationStatisticsChartForArticle?chartType='+chartType+'&accessTime='+time+'&limit='+ limit +'" />');
}
</script>
</html>